<template>
  <div>
    <button @click="bl = !bl">点击按钮布尔值取反</button>
    <!-- :class="{ 类名: 布尔值 }" -->
    <div :class="{ red: bl }">
      盒子
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      bl: true
    }
  }
}
</script>

<style>
  .red{
    transition: all 1s;
    background-color: red;
  }
</style>